import {inject, observer} from "mobx-react";
import React from "react";
import {Component} from "react";
import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
import FixedMainLayout from "../layout/FixedMainLayout";
import RelativeMainLayout from "../layout/RelativeMainLayout";
import GlobalStore from "../stores/GlobalStore";
import ArticleLesson from "./article";
import AssetLib from "./assetLib";
import CourseResource from "./courseResource";
import LivingLesson from "./living";
import MainPage from "./main";
import VideoLesson from "./video";
import VRExp from "./vrExp";
import Course from "./course";
import ExamPage from "./exam";
import Authentication from "./authentication";
import ViewMessage from "./viewMessage";
import AboutUs from "./aboutUs"
import MyCourse from "./myCourse";
import $ from "jquery";
import ScrollToTop from "../components/scrollToTop";
import NewsCenter from "./newsCenter";
import News from "./news";

@inject("globalStore", "userStore")
@observer
export default class Router extends Component<{ globalStore?: GlobalStore }, any> {
    constructor(props) {
        super(props);
        $.ajax({
            type: "get",
            // url: `./config.json`,
            url: `${window.location.origin}/thinkfront/config.json`,
            dataType: "json",
            async: false,
            success: (data) => {
                const dataArrays = data;
                this.props.globalStore.SetDOMainName(dataArrays.doMain);
                this.props.globalStore.SeRegisterByEmail(dataArrays.registerByEmail);
            },
            error: (error, msg) => {
                console.log(msg);
            }
        });
    }

    componentDidMount() {
    }


    renderMainContent() {
        return (
            <RelativeMainLayout>
                <Route path="/*" component={MainPage}/>
            </RelativeMainLayout>
        );
    }

    rendOtherContent() {
        return (
            <RelativeMainLayout>
                <Route path="/home" component={MainPage}/>
                <Route path="/article" component={ArticleLesson}/>
                <Route path="/living" component={LivingLesson}/>
                <Route path="/video" component={VideoLesson}/>
                <Route path="/assetsLib" component={AssetLib}/>
                <Route path="/course" component={Course}/>
                <Route path="/myCourse" component={MyCourse}/>
                <Route path="/courseList" component={CourseResource}/>
                <Route path="/authenticate" component={Authentication}/>
                <Route path="/view" component={ViewMessage}/>
                <Route path="/exam" component={ExamPage}/>
                <Route path="/aboutUs" component={AboutUs}/>
                <Route path="/newsCenter" component={NewsCenter}/>
                <Route path="/news" component={News}/>
            </RelativeMainLayout>
        );
    }

    RenderFixed() {
        return <FixedMainLayout>
            <Route path="/vrExp" component={VRExp}/>
        </FixedMainLayout>
    }

    renderMain() {
        return (
            <Switch>
                <Redirect exact path="/" to={`/home`}/>
                <Route exact path="/vrExp" component={this.RenderFixed}/>
                <ScrollToTop>
                    <Route path="/*" component={this.rendOtherContent}/>
                </ScrollToTop>
            </Switch>
        );
    }

    renderLogin() {
    }

    render() {
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        return (
            <div>
                <BrowserRouter basename={`${DOMAIN_NAME}`}>
                    <Route path="/" component={this.renderMain.bind(this)}/>
                </BrowserRouter>
            </div>
        );
    }
}
